<template>
    <div v-loading.fullscreen.lock="fullscreenLoading" element-loading-text="登陆加载中"
        element-loading-spinner="el-icon-loading">
        <div class="top" v-show="$route.meta.showTopRoof">
            <div style="display: flex; align-items: center;  margin-left: 80px;">
                <div style="  color: #8f8f92;font-size: small;">商城首页</div>
                <div style="display: flex;" class="ionone km">
                    <i class="el-icon-location-information ion"></i>
                    <div style="margin-left: 10px;">天津市</div>
                </div>
            </div>
            <div style="display: flex; align-items: center;">
                <div style="  color: #8f8f92;font-size: small;margin-right: 20px;">{{ $t('toproof.Goodmorning') }}~,</div>
                <div class="km small" @click="login" v-if="!token">登陆</div>
                <div class="km small" @click="loginout" v-else>
                    {{ name }}
                    <span style="color: #0099ff;">
                        退出登陆
                    </span>
                </div>
                <span class="vertical"></span>
                <div class="km">我的商城</div>
                <span class="vertical"></span>
                <div class="km">订单中心</div>
                <span class="vertical"></span>
                <div class="km">个人中心</div>
                <span class="vertical"></span>
                <div class="km  kmm">
                    <el-dropdown @command="handleCommand">
                        <span>
                            {{ $t('navbar.voice') }}
                            <i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="zh" :disabled="'zh' === $i18n.locale">{{ $t('navbar.chinese')
                            }}</el-dropdown-item>
                            <el-dropdown-item command="en" :disabled="'en' === $i18n.locale">{{ $t('navbar.english')
                            }}</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
import { mapState, mapActions } from "vuex"
export default {
    data() {
        return {
            from: {
                username: "admin",
                password: "123456",
            },
            display: true,
            fullscreenLoading: false

        }
    },
    computed: {
        ...mapState('tab', { token: state => state.token }),
        ...mapState('tab', { name: state => state.user.name }),
        //获取vuex中的token
    },
    methods: {
        ...mapActions('tab', ['experimenttest']),
        handleCommand(val) {
            this.$i18n.locale = val
        },
        async login() {
            this.fullscreenLoading = true
            await this.experimenttest({ ...this.from })

            // this.$store.commit('tab/setuser', data)
            this.fullscreenLoading = false
        },
        async loginout() {
            this.$store.commit('tab/setuser', {})
            this.$store.commit('tab/token', '')
        }
    }
}
</script>

<style lang="less" scoped>
.top {
    display: flex;
    justify-content: space-between;
    width: 1500px;
    height: 40px;
    background-color: #f7f8fa;
}

.km {
    // margin-left: 25px;
    color: #8f8f92;
    font-size: small;
}

.kmm {
    margin-right: 153px;
}

.vertical {
    width: 2px;
    height: 15px;
    background-color: #8f8f92;
    margin: 2px 15px 0 15px;
}

.small {
    cursor: pointer;
}
</style>